@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_1460443828_8148205.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/font_1460443828_8148205.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/font_1460443828_8148205.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/font_1460443828_8148205.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/font_1460443828_8148205.svg#iconfont') format('svg'); /* iOS 4.1- */
}
                                     
                                   

.iconfont {
  font-family:"iconfont" !important;
  /*font-size:16px;*/
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}




*{ padding: 0; margin: 0;}
body{ background: #fff;}
li{ list-style: none;}
i,em{ font-style: normal;}
a{ text-decoration: none; color: #ffffff;}
img{ border: none;}
i{ margin-right: 2vw;}

.orange_btn{ display: block; border: none; color: #ffffff; padding: 1.5vw 15vw; background: #FFDA44; font-size: 4.5vw; margin: 6vw auto;}
.head_img{ border-radius: 50%; border: 1px solid;}




/*侧边导航样式*/

.side_nav{ text-align: center; color: #ffffff;}
.side_nav .head_img{ border: 1px solid #0B9547; width: 20vw; height: 20vw; border-radius: 50%; margin: 15vw auto 3vw;}
.side_nav .user_name{ color: #0B9547;}

.nav_main{ margin: 13vw 5vw 0;}
.nav_main li a{ display: block; height: 10vw; line-height: 10vw; margin-bottom: 5.5vw; font-size: 4.5vw; color: #ffffff;}
.nav_main li.active a{ border-bottom: 1px solid #0B9547; color: #0B9547;}
.nav_main li i{ float: left;}





/*活动档案页*/
.list_style{ padding: 0 5vw;}
.list_style>li+li{ border-top: 1px solid #DDDDDD;}



.act_info>li{ padding: 5vw 0 5vw 0; display: -webkit-flex;}

.act_info>li>span{ padding-left: 5vw;}

#att_people{ border-top: 6px solid #F5F5F5; border-bottom: 6px solid #F5F5F5; padding: 6vw 0;}
#att_people .circle_switch{ padding-top: 0;}



.act_det_intro{ border-bottom: 3px solid #F5F5F5;}
.act_det_intro h2{ font-size: 7vw; padding: 7vw 0; border-bottom: 1px solid #DDDDDD;}
.act_det_intro p{ padding: 4vw 0; color: #333333;}
.act_det_list>li{ display: -webkit-flex; padding: 5vw 0;}
.act_det_list li strong{ width: 37.4vw; font-size: 5vw;}
.act_det_list li strong i{ color: #9A9A9A; margin-right: 4vw;}
.act_det_list li ol{ width: 62.6vw; font-size: 4vw;}
.act_det_list li ol li{ line-height: 6vw; list-style: decimal; margin-left: 1em; color: #9A9A9A;}
.act_det_list li ol li+li{ margin-top: 4vw;}

.act_btn_wrap{ display: -webkit-flex; justify-content: space-around; margin: 5vw 0;}
.act_det_btn{ width: 44vw; height: 10.4vw; border-radius: 0; box-sizing: border-box; font-size: 5.5vw;}
.act_det_btn:nth-child(1){ color: #9A9A9A; border-color: #9A9A9A;}
.act_det_btn:nth-child(2){ color: #ffffff; background-color: #9A9A9A;}







/*个人主页*/



/*公用结构样式*/
.user_pub1 h3{ font-size: 5vw; margin: 8vw 0; padding: 1vw 0 1vw 4vw; border-left: 4px solid #FFDA44;}
.user_pub1 ul{ border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 0 4vw;}
.user_pub1 ul li{ padding: 5vw 0; font-size: 4.5vw;}
.user_pub1 ul li+li{ border-top: 1px solid #DDDDDD;}
.user_pub1+.user_pub1{ border-top: 6px solid #F5F5F5;}

.user_pub1 ul li>i.iconfont{ padding-right: 3vw; color: #0E9F4E;}
.user_pub1 ul li>em{ color: #848484; display: inline-block;}


.label_wrap span{ display: inline-block; border: 1px solid #009944; color: #009944; border-radius: 5px; padding: 0.3vw 0.8vw 0.2vw; margin: 1.5vw; font-size: 3.6vw;}



/*列表项私有样式*/
#self_info .user_pub1 ul li>em{ width: 29vw;}
#self_info .user_pub1 ul li>span{ color: #ADADAD;}

#self_comment .user_pub1 ul li{ font-size: 5vw;}
#self_comment .user_pub1 ul li>em{ width: 16vw;}
#self_comment .user_pub1 ul li>span{  padding-right: 6vw;}
#self_comment .user_pub1 ul li>span i.iconfont{ margin: 0 1.2vw; color: #ADADAD;}
#self_comment .user_pub1 ul li>span i.active{ color: #FFDA44;}


#interest .user_pub1 ul li>em{ width: 19vw;}
#interest .user_pub1 ul li>span.label_wrap span{ font-size: 3.6vw;}


/*头部公共*/
#u_user_info{ height: 51vw; display: -webkit-flex; -webkit-align-items: flex-end;}
#u_user_info .head_img{ width: 25vw; height: 25vw; border-radius: 50%; border: 1px solid #F7D447; margin: 0 2vw 5vw 4vw;}
.user_name{ font-size: 6vw;}
.per_lab{ border: 1px solid #009944; color: #009944; border-radius: 5px; padding: 0.2vw 0.6vw 0.3vw; margin-left: 3vw; font-size: 3vw;}
.per_rel{color: #A6A6A6;}
.per_rel span{ font-size: 3.6vw; line-height: 10vw;}
.per_rel span+span{ margin-left: 6vw;}


/*选项卡样式*/
#user_btn_wrap{ display: -webkit-flex; background: #F5F5F5;}
#user_btn_wrap span{ -webkit-flex: 1; text-align: center;  border-top: 1px solid #DDDDDD; padding: 5vw 0; font-size: 5vw; color: #0E9D4D;}
#user_btn_wrap span+span{ border-left: 1px solid #DDDDDD;}
#user_btn_wrap span.active{ background: #009944; color: #ffffff; position: relative;}
#user_btn_wrap span.active::after{ content: ""; display: block; width: 4vw; height: 4vw; border-radius: 1.5vw 0 1.5vw 0; background: #009944; margin: auto; position: absolute; left: 0; right: 0; bottom: -2vw; -webkit-transform: rotate(45deg);}


/*自我评价私有*/
#self_comment .label_wrap{ border-top: 1px solid #DDDDDD; padding: 6vw 4vw;}
#self_comment .sel_def_btn{ border-color: #333333; color: #333333;}
.my_label .orange_btn{ margin-top: 0;}
.more_btn{ width: 100%; padding: 3vw 0;}


/*我的兴趣私有*/


.border_line{ width: 100%; height: 1px; background: #DDDDDD;}

/*兴趣倾向-我的兴趣轮播*/
.circle_switch{ width: 84vw; overflow: hidden; margin: 0 auto; position: relative; padding-top: 10vw;}
.circle_switch ol{ display: -webkit-box; position: relative; left: 0;}
.circle_switch ol li{ width: 16.8vw; text-align: center;}
.circle_switch ol li .in_img{ display: block; width: 12.6vw; height: 12.6vw; border-radius: 50%; background: #009944; margin: 0 auto 3vw;}
.circle_switch ol li .in_title{ font-size: 4vw;}

.in_pre_next{ position: absolute; width: 100%; position: relative; top: -17.5vw; padding: 0 2vw; color: #8F8F8F; font-size: 3.6vw;}
.in_pre_next #in_pre{ float: left;}
.in_pre_next #in_next{ float: right;}



/*顶部按钮*/
.user_top_btn{ width: 100%; position: absolute; top: 4vw; padding: 2vw 4vw; display: -webkit-flex; -webkit-justify-content: space-between; color: #ffffff;}





/*个人档案主页*/



#user_file_info{ background: rgba(0, 0, 0, 0.3); color: #ffffff;}
.check_file{ margin-right: -1em;}
.uf_head_wrap{ display: -webkit-flex; -webkit-justify-content: space-between; padding: 18vw 20vw 0; align-items: flex-end;}

#user_file_info .num_add{ text-align: center; position: relative; top: 2.5vw;}
#user_file_info .num_add i{ display: block; width: 11vw; height: 11vw; border-radius: 50%; background: #B8A040; color: #ffffff; text-align: center; line-height: 11vw; margin: 0;}
#user_file_info .num_add span{ font-size: 3.6vw; line-height: 4.5vw;}
.uf_head_wrap .head_img{ width: 20vw; height: 20vw; border-color: #F7D344;}


.uf_grade{ padding: 0 8vw; color: #848484; display: -webkit-flex; -webkit-justify-content: space-between; font-size: 4.5vw;}


.uf_user_wrap{ text-align: center; padding: 5vw 0;}
.uf_user_wrap .user_name{ }
.uf_user_wrap .per_rel{ color: #ffffff;}



#uf_other_comment{ margin-bottom: 16vw;}
#uf_self_comment .label_wrap, #uf_other_comment .label_wrap{ padding: 0 8vw; margin: 8vw 0;}

#uf_other_comment ul{ padding: 0 8vw; border: none;}
#uf_other_comment ul  li{ border: none; font-size: 5vw;}
#uf_other_comment ul li>em{ width: 16vw;}

#uf_other_comment ul li>span i.iconfont{ margin: 0 1.6vw; color: #ADADAD;}
#uf_other_comment ul li>span i.active{ color: #FFDA44;}







/*常用档期*/
#com_plan_header{ display: -webkit-flex; -webkit-justify-content: space-between; align-items: center; background: #594F3F;color: #ffffff; padding: 0 3vw; height: 9.6vw; line-height: 9.6vw;}
.com_plan_con{ position: relative; padding-bottom: 2vw;}
.com_plan_con dd{ display: -webkit-flex; -webkit-justify-content: space-between; align-items: flex-end; margin: 0 3vw 0 5vw; padding-top: 7vw;}
 .com_plan_con::before{ display: block; content: ""; width: 92vw; height: 1px; background: #DDDDDD; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto;}
.com_plan_con dd strong{ font-size: 5.2vw;}
.com_plan_con dd .label_wrap{ margin-left: -6vw;}
.com_plan_con dd .label_wrap span{ font-size: 3vw; margin: 0; padding: 0 0.5vw; display: inline;}
.com_plan_con dt{ padding: 0 10vw 0vw; font-size: 4vw; line-height: 12vw;}
.com_plan_con dt+dt{ margin-top: -4vw;}
.com_plan_con dt span{ font-size: 3.5vw; color: #AFAFAF;}

.com_plan_btn{ margin-top: 15vw;}

/*.com_plan_con+.com_plan_con dd{ border-top: 1px solid #DDDDDD;}*/


#common_plan dl.unactive::after{ display: block; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255, 255, 255, .8);} 






/*活动档案home页*/
#tab_top_bar{ padding-left: 4vw;}
#tab_top_bar, #tab_top_bar .acth_btn_wrap{ display: -webkit-flex; -webkit-justify-content: flex-start; align-items: center;}
#tab_top_bar .acth_btn_wrap{ margin: 0 auto; font-size: 3.5vw; height: 12vw;}
#tab_top_bar span{ padding: 1vw 3vw; border: 1px solid #FFDA44; color: #B8B8B8;}
#tab_top_bar span:nth-child(1){ border-radius: 1.5vw 0 0 1.5vw;}
#tab_top_bar span:nth-child(2){ margin-left: -1px; border-radius: 0 1.5vw 1.5vw 0;}
#tab_top_bar span.active{ background: #FFDA44; color: #ffffff;}


.acth_list li{ width; 100%; height: 28.7vw; background: #aaaaaa; position: relative;}
.acth_list li img{ width: 100vw; height: 28.7vw;}
.acth_list li a{ color: #ffffff;}
.acth_list li .acth_text{ position: relative; top: -22vw; font-size: 4.5vw; text-align: center;}
.acth_list li .acth_exp{ font-size: 3vw;}
.acth_list li .acth_exp i{ }
.acth_list li .acth_exp span{ padding: 0 2vw;}
.acth_list li .acth_date{ text-align: right; margin: 4vw 2.5vw 0 0; font-size: 3vw;}

.acth_list li+li{ margin-top: 2vw;}

.acth_state{ box-sizing: border-box; display: block; position: absolute; font-size: 3vw; padding: 0 2vw; height: 5vw; line-height: 5vw; background: #FFDA44;}
.acth_state::after{ box-sizing: border-box; content: ""; display: block; border-left: 2.5vw solid #FFDA44; border-top: 2.5vw solid transparent; border-bottom: 2.5vw solid transparent; position: absolute; top: 0; right: -2.5vw;}




/*广场页*/
.squ_pub1{ padding: 0 4.5vw; padding-bottom: 5vw;}
.squ_pub1 ul a{  color: #ffffff;}
.squ_pub1+.squ_pub1{ border-top: 5px solid #F5F5F5;}
.squ_pub1 h4{ border-left: 3px solid #FFDE59; padding-left: 5vw; margin: 3vw 0;}
.guess_like ul{ display: -webkit-flex; -webkit-justify-content: space-between;}
.guess_like ul li a{ display: block; width: 29vw; background: #DDDDDD; height: 32.6vw; line-height: 32.6vw; text-align: center;}
.try_new ul li a{ display: block; width: 100%; background: #DDDDDD; height: 32vw; line-height: 32vw; text-align: center; }
.try_new ul li+li{ margin-top: 2vw;}





/*推荐三选一页面*/
.actrh_list{ height: 49vw; background: #D3C294;}
.actrh_list+.actrh_list{ margin-top: 2vw;}
.actrh_list img{ width: 100%; height: 49vw;}

.actrh_con_wrap{ padding: 1.5vw 0; background: rgba(0, 0, 0, 0.1); position: relative; top: -36vw;}
.actrh_con{ border: 1px solid #ffffff; color: #ffffff; width: 60%; margin: 0 auto; text-align: center; }
.actrh_con h3{ font-size: 5vw; padding-top: 2.5vw;}
.actrh_con p{ margin-bottom: -3vw; margin-top: 2vw; font-size: 3.5vw; color: #726F6E;}

.actrh_con>span{ display: inline-block; background: #009944; position: relative; left: -30vw; top: -10vw; font-size: 3vw; padding: 1vw 1.5vw;}

.actrh_scrap{ position: relative; top: -28vw; font-size: 3.5vw; color: #ffffff; display: -webkit-flex; -webkit-justify-content: space-between; padding: 0 3vw;}
.actrh_scrap span:nth-child(2){ color: #F4943C;}



/*三选一详细页面和广场页活动详情*/

.actrd_img_sec, .actrd_img_sec img, .actrd_img_sibiling{ width: 100vw; height: 50vw;}
.actrd_img_sibiling{ position: relative; top: -50vw;}
.actrd_img_sibiling .img_top_bar{ width: 100vw; padding: 1vw 4vw;}
.actrd_img_sibiling .img_top_bar>i{ color: #ffffff; }
.actrd_img_sibiling .img_top_bar em{ color: #FFDA44; border: 1px solid #FFDA44; border-radius: 2vw; padding: 0.5vw 2vw; font-size: 3.6vw; position: relative; left: 40.5vw;}

.actrd_img_sibiling .img_bottom_bar{ position: absolute; bottom: 0; width: 100%; background-color: rgba(0,0,0, 0.5); display: -webkit-flex; -webkit-justify-content: space-between; padding: 1.5vw 3vw;}
.actrd_img_sibiling .img_bottom_bar strong{ color: #009944; font-size: 6vw;}
.actrd_img_sibiling .img_bottom_bar span{ color: #ffffff; font-size: 3.2vw;}


.actrd_m_c{ display: -webkit-flex; border-top: 6px solid #F5F5F5; border-bottom: 6px solid #F5F5F5; padding: 8vw 0;}
.actrd_m_c h4, .actrd_m_c .mark span{ padding-left: 4vw;}
.actrd_m_c h4{ font-size: 5vw;}
.actrd_m_c .mark{ width: 50vw; position: relative;}
.actrd_m_c .mark::after{ display: block; content: ""; width: 1px; height: 20vw; position: absolute; right: 0; top: 10vw; background: #DDDDDD;}
.actrd_m_c .mark .mark_num{ text-align: center; font-size: 16vw; padding: 10vw 0;}
.actrd_m_c .mark span{ color: #B1B1B1; font-size: 3.6vw;}
.actrd_m_c .company{ width: 50vw;}
.actrd_m_c .company_img{ text-align: center;} 

.attend_btn{ width: 100%; margin: 0; padding: 2vw 0; border-radius: 0;}


/*广场页活动详情*/
.want_att{ width: 16vw; height: 16vw; line-height: 16vw; text-align: center; background: #FFDA44; color: #ffffff; border-radius: 50%; font-size: 5vw; position: absolute; right: 4vw; bottom: 10vw;}
.squ_detail_list li{ }
.squ_detail_list{ font-size: 4.5vw; line-height: 7vw;}
.squ_detail_list em{ width: 34vw; }
.squ_detail_list ol{ width: 58vw;}
.squ_detail_list ol li{ list-style-type: none;}
/*.squ_detail_list ol li>*{ display: inline-block; vertical-align: top;}*/
.squ_detail_list ol li>b{ font-weight: normal;}
/*.squ_detail_list ol li>span{ width: 90%;}*/

.act_det_com{ padding: 0 4vw; border-top: 8px solid #F5F5F5;}
.act_det_com h3{ font-size: 5.5vw; font-weight: normal; height: 14vw; line-height: 14vw;}
.act_det_com li{ display: -webkit-flex; border-top: 1px solid #DDDDDD; padding: 5vw 0;}
.act_det_com li .head_img{ width: 14vw; height: 13.4vw; border: none; background: #FFDA44; overflow: hidden;}
.act_det_com li .head_img img{ width: 14vw; height: 13.4vw;}
.act_det_com li .comment_wrap{ width: 78vw; padding: 2vw 0 0 1em;}
.act_det_com li .comment_wrap .com_mark{ font-size: 3vw; color: #C7C7C7;}
.act_det_com li .comment_wrap .com_mark i.active{ color: #FFDA44;}
.act_det_com li .comment_wrap .user_name{ font-size: 4.5vw;}
.act_det_com li .comment_wrap .per_lab{ font-size: 3.6vw;}
.act_det_com li .comment_wrap .comment{ font-size: 4.2vw; line-height: 6vw;}

#detail_fold{ height: 21vw; line-height: 7vw; padding-bottom: 3vw;}
#detail_fold ol{  overflow: hidden;}
#detail_fold ol li:nth-child(1){ text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
#detail_fold ol li:nth-child(2){ text-align: center; font-weight: bold;}
/*#detail_fold ol{ 
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; 
}*/



.fold_btn{ width: 7vw; height: 7vw; line-height: 7vw; text-align: center; margin: 0 auto; border-radius: 50%; background: #FFDA44; position: relative; top: 4.5vw; margin-top: -4vw;}
#detail_unfold{ border-top: 8px solid #F5F5F5; border-bottom: none;}
#detail_unfold ol{ padding: 5vw 0 5vw 7vw;}
#detail_unfold ol li{ list-style-type: decimal;}



/*我的兴趣*/

#my_interest{ padding: 4vw 5vw 10vw;}

#selected_title{ height: 10vw; line-height: 10vw; margin: 0 auto 8vw; text-align: center; background: #009944; color: #ffffff; font-size: 5.5vw; border-radius: 3vw; position: relative;}
#selected_title::before, #selected_title::after{ display: block; content: ""; width: 2.4vw; height: 16vw; background: #594F3F; position: absolute; top: -2vw; z-index: -1; border-radius: 1.2vw;}
#selected_title::after{ left: 8vw;}
#selected_title::before{ right: 8vw;}
#selected_title span{ margin-right: 3vw;}

#selected_con{ background: #F5F5F5; border: 1px solid #AEAEAE; border-radius: 3vw; color: #009944; position: relative; padding: 6vw 2vw; display: -webkit-flex; -webkit-justify-content: center; align-items: center; flex-wrap: wrap;}
#selected_con::before{ box-sizing: border-box; display: block; content: ""; width: 6vw; height: 6vw; background: #F5F5F5; position: absolute; top: -2vw; right: 25.5vw; border-radius: 1.6vw 0 1.2vw 0; border: 1px solid #AEAEAE; border-right: none; border-bottom: none; position: absolute; top: -3vw; -webkit-transform: rotate(45deg);}

#selected_con span{ border: 1px solid #FAE79C; background: #FAFAFA; font-size: 4vw; border-radius: 3.5vw; height: 7vw; line-height: 7vw; padding: 0 3vw; margin: 1.5vw;}


#inte_item_wrap{ width: 78vw; margin: 10vw auto 0; padding: 10vw 0; background: #F5F5F5; border-radius: 6vw;}
.inte_item{ width: 58vw; margin-left: 6vw; position: relative;}
.inte_item+.inte_item{ margin-top: 8vw;}

.item_list_wrap{ background: #FFFFFF; display: -webkit-flex; -webkit-justify-content: center; align-items: center; flex-wrap: wrap; padding: 6vw 0 10vw; border-radius: 0 0 50% 50% / 0 0 12vw 12vw;}
.item_list_wrap span{ border: 1px solid #009944; color: #009944; font-size: 4vw; border-radius: 3.5vw; height: 7vw; line-height: 7vw; padding: 0 2vw; margin: 1.5vw 3vw; z-index: 2;  position: relative;}

.item_list_wrap::after{display: block; content: ""; width: 48vw; height: 15vw; border-radius: 50%; background: #F8F8F8; position: absolute; margin: auto; bottom: 4vw; left: 0; right: 0; z-index: 1;}


.item_list_wrap span i{ display: none;}
.item_list_wrap span.active>i{ display: block; width: 3vw; height: 3vw; line-height: 3vw; text-align: center; background: #FFDA44; margin: auto; position: absolute; top: 0; bottom: 0; right: -1.5vw; color: #ffffff; border-radius: 50%; font-size: 3vw;}





/*已参加活动详情页*/

#done_act{  width: 100vw; overflow-x: hidden;}
#done_img_sw_wrap{ position: relative; height: 76vw; width: 100vw;}

#done_comment .my_label{ padding-top: 6vw;}
#done_comment .label_wrap{ padding: 0 8vw; margin: 5vw 0;}
#done_act h3{ display: -webkit-flex; -webkit-justify-content: space-between; align-items: center; font-size: 5vw; border-left: 0; padding-left: 0; padding-right: 4vw; margin: 4.5vw 0;}
#done_act h3 span{ height: 6vw; line-height: 6vw; border-left: 4px solid #FFDA44; padding-left: 4vw;}
#done_act h3 em{ background: #FFDA44; color: #ffffff; padding: 0 1.5vw; height: 8vw; line-height: 8vw; border-radius: 2vw;}
.com_list_more{ text-align: center; font-weight: bold; padding: 6vw 0;}

.support_wrap{ text-align: center; padding: 2vw 0 7vw 0;}
.support_wrap em{ display: inline-block; text-align: center; width: 10vw;}
.support_wrap em span, .support_wrap em i{ display: block; font-size: 4vw; line-height: 8vw; margin: 0 auto;}
.support_wrap em i{ width: 8vw; height: 8vw; background: #FFE98F; border-radius: 50%;}

#mycompany_wrap .in_img{ background: black;}
#mycompany_wrap li .in_title{ display: none;}
#mycompany_wrap li.active .in_img{ border: 3px solid #009944;}
#mycompany_wrap li.active .in_title{ display: block;}

.done_img_3d{ position: absolute; top: 12vw; right: 5vw; width: 54vw; height: 54vw; opacity: 0;}

.done_img_3d img{ width: 100%; height: 100%;}
.img3d_explain{ display: none;}
#done_act .img3d_explain h3{ font-size: 4vw; padding: 0; margin: 0;}
.img3d_explain .img3d_lab_wrap{ font-size: 3vw}
.img3d_explain .img3d_mark_wrap{ font-size: 3.2vw;}


.img3d_explain{ width: 100%; display: -webkit-flex; -webkit-justify-content: space-between; align-items: center; height: 9vw; line-height: 9vw; position: absolute; bottom: 0; background: rgba(0, 0, 0, 0.3);}

.done_img_3d:nth-child(1){ top: 12vw; left: 5vw; z-index: 9; opacity: 0.6;}
.done_img_3d:nth-child(2){ top: 5vw; left: 16vw; z-index: 10; width: 68vw; height: 68vw; opacity: 1;}
.done_img_3d:nth-child(3){ top: 12vw; left: 41vw; z-index: 9; opacity: 0.6;}
/*此处绝对定位的必须同为top，left或其他，各元素必须相同，否则在chrome下有bug*/







/*首页*/
#first_page_header{ height: 7vh; line-height: 7vh; background: #1D2530; color: #ffffff; display: -webkit-flex; justify-content: space-between; padding: 0 4vw; font-size: 1.6rem;}
#fp_con{background: rgba(0, 0, 0, .6); height: 93vh;}

#fp_con{ overflow: hidden;}
#fp_main{ width: 62vw; height: 84vh; float: left; overflow: hidden; position: relative; margin: 4.5vh 0;}

#fp_main li em{ position: absolute; margin: auto; top: 0; bottom: 0; left: -75%;}


#fp_main li{ position: absolute; right: -100vw; top: 45vh; opacity: 0.5; box-sizing: border-box; display: inline-block; width: 6.8vh; height: 6.8vh; border: 2px solid #fff; border-radius: 50%; line-height: 6.8vh; text-align: center; font-size: 1rem;}

#fp_main li:nth-child(1){ right: 5vw; top: 2vh; opacity: 0.3;}
#fp_main li:nth-child(2){ right: 18vw; top: 15.8vh; opacity: 0.6; height: 10.2vh; width: 10.2vh; line-height: 10.2vh; font-size: 1.5rem;}
#fp_main li:nth-child(3){ right: 20vw; top: 33.6vh; opacity: 1; height: 15.3vh; width: 15.3vh; line-height: 15.3vh; font-size: 2.25rem;}
#fp_main li:nth-child(4){ right: 18vw; top: 54.8vh; opacity: 0.6; height: 11vh; width: 11vh; line-height: 11vh; font-size: 1.5rem;}
#fp_main li:nth-child(5){ right: 5vw; top: 73vh; opacity: 0.3;}

#fp_main li>span{ font-size: 2.1em;}

#fp_main li.active{ color: #FFDA44;}
#fp_main li.active::after{ display: block; content: "✔"; width: 2.6vh; height: 2.6vh; line-height: 2.6vh; background: #FFDA44; color: #ffffff; border-radius: 50%; font-size: 1.8vh; position: absolute; margin: auto; top: 0; bottom: 0; left: -1.6vh;}



#fp_sub{ width: 38vw; float: right; overflow: hidden; height: 70vh; margin: 11vh 0; position: relative;}
.fp_sub_list{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: none;}
.fp_sub_list span{ box-sizing: border-box; display: inline-block; border: 1px solid #fff; font-size: 1.2rem; height: 4vh; line-height: 4vh; padding: 0 1.2rem; margin: 2.35vh 2rem; border-radius: 2vh;}
.fp_sub_list span.active{ color: #FFDA44; border-color: #FFDA44;}
.sub_page_wrap{ float: left; width: 38vw;}

.sub_btn{ position: absolute; bottom: 6vh; right: 0; width: 38vw; text-align: center;}
.sub_btn span{ display: inline-block; width: 4vh; height: 4vh; line-height: 4vh;  background: rgba(255, 255, 255, .5); border-radius: 50%; text-align: center;  color: #FFDA44; border: 1px solid #FFDA44; margin: 0 1vw; font-size: 2.8vh;}












































